<script setup>
import {onMounted, ref} from "vue";
import myAxios from "@/plugins/myAxios";
import {Message} from "@arco-design/web-vue";

const dishData = ref([{}])
//展示菜品信息
onMounted(async() => {
  const res = await myAxios.get('/menu/list/dishes');
  if (res){
    dishData.value = res.data.data
    console.log("dish:",dishData.value)
    Message.success('请求成功')
  }else
    Message.error('请求失败')
})
//存放选中的菜品信息
const selectedDish = ref(null)
const visible = ref(false);
const quantity = ref(0);
//点击预订按钮
const handleClick = (dish) => {
  selectedDish.value = dish
  console.log("selectedDish:",selectedDish.value)
  visible.value = true;
};
//点击侧边栏的确定按钮
const handleOk = async() => {
  const res = myAxios.post('/menu/order',{
    quantity: quantity.value,
    cost: selectedDish.value.price,
    dishId: selectedDish.value.id,
    customerId: localStorage.getItem("customerId")
  })
  if (res){
    Message.success("预订成功")
  }else {
    Message.error("预订失败")
  }
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
}
</script>

<template>
  <div class="card-container" :style="{ display: 'flex' }">
    <a-card v-for="(dish, index) in dishData"
            :key="index"
            class="card-demo"
            :title="dish.name || '菜品'"
            hoverable >
      <template #extra>
        <a-button type="primary" @click="handleClick(dish)">预订</a-button>
        <a-drawer :width="340" :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
          <template #title>
            <!-- 显示当前选中菜品的名称 -->
            {{ selectedDish?.name || '预订详情' }}
          </template>
          <div style="margin-top: 20px">
            <span>价格：{{selectedDish?.price}}</span>
          </div>
          <div style="margin-top: 20px">
            <span>详情：{{selectedDish?.description}}</span>
          </div>
          <a-space style="margin-top: 50px" direction="vertical" size="large">
            <div>
              <span style="margin-right: 10px">数量</span>
              <a-input-number v-model="quantity" :style="{width:'200px'}" placeholder="选择数量" class="input-demo" :min="0"/>
            </div>
            <div class="selectOne">
              <span style="margin-right: 10px">辣量</span>
              <a-space direction="vertical" size="large">
                <a-radio-group>
                  <a-radio value="A">多辣</a-radio>
                  <a-radio value="B">中辣</a-radio>
                  <a-radio value="C">少辣</a-radio>
                </a-radio-group>
              </a-space>
            </div>
            <div class="selectTwo">
              <span style="margin-right: 10px">盐量</span>
              <a-space direction="vertical" size="large">
                <a-radio-group>
                  <a-radio value="B">适盐</a-radio>
                  <a-radio value="C">少盐</a-radio>
                </a-radio-group>
              </a-space>
            </div>
          </a-space>
        </a-drawer>
      </template>
      <div v-if="dish">
        <p>价格: {{ dish.price }} 元</p>
      </div>
      <div v-if="dish">
        <p>{{ dish.description }} </p>
      </div>
    </a-card>
  </div>
</template>

<style scoped>
.card-demo {
  width: 360px;
  margin-left: 24px;
  transition-property: all;
}
.card-demo:hover {
  transform: translateY(-4px);
}
/* 卡片容器：Flex布局 + 换行 + 间距 */
.card-container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 10px;      /* 卡片间距 */
}

/* 每个卡片固定宽度（计算为33.33%减去间距） */
.card-demo {
  width: calc(31% - 10px); /* 3列布局：100%/3 - 间距补偿 */
  min-width: 200px;           /* 最小宽度防止挤压 */
}
</style>